<template>
	<view>
		<scroll-view class="scroll-view" :style="{height:swiperHeight}" scroll-y refresher-background="#338B5B"
			@scroll="pageScroll" @scrolltolower="onreachBottom" upper-threshold="40" @scrolltoupper="scrolltoupper">
			<view class="option-wrap">
				<!-- 搜索框 -->
				<view class="search-wrap">
					<image src="../../static/icon_loacation.png" mode="widthFix"></image>
					<view class="text" @click="clickCity">
						{{locationCity}}
					</view>
					<view class="flex-1">
						<u-input v-model="keyword" placeholder=" " height="72"></u-input>
					</view>
					<view class="btn" @click="search">
						搜索
					</view>
				</view>
				<!-- 分类标签 -->
				<view class="sticky-wrap">
					<view :class="{sticky:stickyFlag}">
						<scroll-view scroll-x="true" class="badge" @touchmove.stop>
							<view class="item" v-for="item in badgeList" :key="item.id"
								:class="{cur:currentBadge==item.id}" @click="selectBadge(item.id)">
								{{item.name}}
							</view>
						</scroll-view>
						<!-- 日期选择 -->
						<calendarTab @click="pickerDate"></calendarTab>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list-1">
				<!-- 当前进行中订单 -->
				<!-- is_xc 0=订单，1=行程 -->
				<view class="list-3" v-if="nowXcList.length>0">
					<view class="status-text" v-if="nowXcList[0].is_xc==0">
						当前有<text>1</text>个订单进行中
					</view>
					<view class="status-text" v-if="nowXcList[0].is_xc==1">
						当前有<text>1</text>个行程进行中
					</view>
					<view :class="item.is_xc===1?'item-4':'item-3'" v-for="(item,i) in nowXcList" :key="item.id">
						<block v-if="item.is_xc===0">
							<view class="header-3">
								<view class="date">
									开始时间：<text>{{item.create_time}}</text>
								</view>
								<view class="badge" v-if="item.order_type==1">
									{{item.type | type}}
								</view>
								<view class="badge" v-if="item.order_type==2">
									包车
								</view>
								<view class="badge" v-if="item.order_type==3">
									租车
								</view>
							</view>
							<view class="body-3" @click="goOrderDetail(item.id)">
								<u-image border-radius="8" width="180" height="180" :src="item.cover" mode="aspectFill">
								</u-image>
								<!-- 行程 -->
								<view class="address" v-if="item.order_type==1">
									<view class="item">
										<view class="start-point">
											<view class="line">
											</view>
										</view>
										<view class="name">
											{{ item.start[0].name}}
										</view>
									</view>
									<view class="item mt-20">
										<view class="end-point">
										</view>
										<view class="name">
											{{ item.end[0].name}}
										</view>
									</view>
									<view class="flex-between">
										<view class="price">
											¥{{item.money}}
										</view>
									</view>
								</view>
								<!-- 包车租车 -->
								<view class="address" v-if="item.order_type!=1">
									<view class="item">
										<view class="start-point">
										</view>
										<view class="name">
											{{ item.cy.brand || ''}}{{ item.cy.model|| ''}}{{ item.cy.color|| ''}}
										</view>
									</view>
									<view class="flex-between">
										<view class="price">
											¥{{item.money}}
										</view>
									</view>
								</view>
							</view>
							<view class="footer">
								<view class="status" @click="goOrderDetail(item.id)">
									{{item.status | userStatus}}
								</view>
								<view class="user">
									<view v-if="item.code && item.status!=4 && item.status!=5">
										乘车码：{{item.code}}
									</view>
									<view v-if="item.status==4" class="btn-1" @click="comment(item)">
										去评价
									</view>
									<view v-if="item.status==0" class="btn-1 ml-30" @click="ckcancel(item,i)">
										取消
									</view>
									<view class="gray-9" v-if="item.status==-1">
										剩
										<u-count-down :show-hours="false" :timestamp="item.last_payment_time - nowDate"
											@end="timeEnd"></u-count-down>
										自动关闭
									</view>
									<view v-if="item.status==-1" class="btn-2" @click="payment(item,i)">
										去支付
									</view>
									<!-- 租车包车 -->
									<block v-if="item.order_type==2 || item.order_type==3">
										<view v-if="item.status==1" class="btn-2" @click="confirmOrder(item,i)">
											订单完成
										</view>
									</block>
								</view>
							</view>
						</block>
						<block v-if="item.is_xc===1">
							<view class="header-4">
								<view class="date">
									开始时间：<text>{{item.create_time}}</text>
								</view>
								<view class="badge">
									{{item.type | type}}
								</view>
							</view>
							<view class="body-4" @click="goCzDetail(item.order_status,item.id,item.price,item.order)">
								<image class="pic" :src="item.cover" mode="aspectFill"></image>
								<view class="address">
									<view class="item">
										<view class="start-point">
											<view class="line">
											</view>
										</view>
										<view class="name">
											{{ item.start[0].name }}
										</view>
									</view>
									<view class="item mt-20">
										<view class="end-point">
										</view>
										<view class="name">
											{{ item.end[0].name }}
										</view>
									</view>
									<view class="flex-between">
										<view class="price">
											¥{{item.price}}
										</view>
										<view class="seat">
											<text>{{item.num}}</text>/{{item.seat}}座
										</view>
									</view>
								</view>
							</view>
							<view class="footer-4">
								<view class="text" @click="goCzDetail(item.order_status,item.id,item.price,item.order)">
									<text class="end" v-if="item.order_status==5">已取消</text>
									<text class="start" v-if="item.order_status==3">进行中</text>
									<text class="end" v-if="item.order_status==4">行程结束</text>
									<text class="start" v-if="item.order_status==1">当前有效的行程</text>
									<block v-if="item.order_status==2"><text>{{item.dqr}}个</text>预约待确认</block>
								</view>
								<block v-if="item.order_status==2">
									<view class="user" v-for="(_item,_i) in item.order" :key="_item.id">
										<u-image
											@click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + _item.user_id)"
											:src="_item.avatar" border-radius="68" width="68" height="68"></u-image>
										<view class="name flex">
											<view class="line-clamp"
												@click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + _item.user_id)">
												{{_item.nickname}}</view>
											<image class="icon-40 mx-20" @click="$tools.makePhone(_item.secret_no)"
												src="../../static/btn_tel.png"></image>
										</view>
										<!-- 已取消 -->
										<block v-if="_item.status==6">
											<view class="n-cancel">
												{{_item.status | userStatus}}
											</view>
										</block>
										<!-- 未支付 -->
										<block v-else-if="_item.status==-1">
											<view class="error">
												{{_item.status | userStatus}}
											</view>
										</block>
										<block v-else>
											<view class="sucess">
												{{_item.status | userStatus}}
											</view>
										</block>
						
										<!-- 拒绝 确认同行 -->
										<block v-if="item.order_status==2">
											<view v-if="_item.status==0" class="btn-1"
												@click="refuse(_item.id,i,_i,_item)">
												拒绝
											</view>
											<view v-if="_item.status==0" class="btn-2"
												@click="confirmOrder1(_item.id,i,_i,_item)">
												确认同行
											</view>
											<view class="error" v-if="_item.status==2">已拒绝</view>
										</block>
										<!-- 上车同行 -->
										<block v-if="item.order_status==2">
											<view v-if="_item.status==3" class="btn-2" @click="openCheckIn(_item.id)">
												上车确认
											</view>
											<view class="sucess" v-if="_item.status==1">已确认</view>
										</block>
									</view>
								</block>
								<view v-if="item.order_status==1 || item.order_status==2" class="action">
									<view class="cancel-btn" @click="driverqxxcHandle(item.id,i,item)">
										取消行程
									</view>
									<view v-if="item.order_status==2" class="start-btn"
										@click="driverksxc(item.id,i,item)">
										开始行程
									</view>
								</view>
								<view v-if="item.order_status==3" class="action">
									<view class="start-btn" @click="driverjsxc(item.id,i,item)">
										结束行程
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>

				<u-waterfall v-model="list" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="item u-skeleton-fillet" v-for="(item,i) in leftList" :key="i"
							@click="goDetail(item.id,item.dateType)">
							<!-- 举报弹窗 -->
							<!-- <view class=""></view> -->
							<!-- 举报弹窗 end -->
							<view class="pic-center">
								<u-lazy-load :image="item.cover"></u-lazy-load>
							</view>
							<!-- 行程 -->
							<block v-if="item.dateType == 1">
								<view class="setting">
									<view class="date">
										{{item.create_time}}
									</view>
									<view class="count">
										<image src="../../static/icon-like.png" mode=""></image>
										<text class="mr-14">{{item.like}}</text>
										<image src="../../static/icon-hate.png" mode=""></image>
										<text>{{item.no_like}}</text>
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-1">
										拼
									</view>
									<view class="title line-clamp">
										{{item.title}}
									</view>
									<text class="num">{{item.num}}/{{item.seat}}座</text>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 租车 -->
							<block v-if="item.dateType == 4">
								<view class="setting">
									<view class="chuzu-status chuzu-status-1" v-if="item.car_status==1">
										<text>●</text>出租中
									</view>
									<view class="chuzu-status chuzu-status-2" v-if="item.car_status==0">
										<text>●</text>空闲中
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-2">
										租
									</view>
									<view class="title line-clamp">
										{{item.address}}
									</view>
								</view>
								<view class="desc flex-between">
									<view>{{item.brand}}{{item.model}}{{item.color}}</view>
									<view>{{item.number_plate}}</view>
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 包车 -->
							<block v-if="item.dateType == 5">
								<view class="flex-between relative">
									<view class="type-badge type-badge-3">
										包
									</view>
									<view class="title line-clamp">
										{{item.brand}}{{item.model}}{{item.color}}
									</view>
								</view>
								<view class="desc">
									{{item.number_plate}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 店铺 -->
							<block v-if="currentBadge==6">
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.name}}
									</view>
								</view>
								<view class="desc line-clamp-2">
									{{item.introduction}}
								</view>
							</block>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="item u-skeleton-fillet" v-for="(item,i) in rightList" :key="i"
							@click="goDetail(item.id,item.dateType)">
							<!-- 举报弹窗 -->
							<!-- <view class=""></view> -->
							<!-- 举报弹窗 end -->
							<view class="pic-center">
								<u-lazy-load :image="item.cover"></u-lazy-load>
							</view>
							<!-- 行程 -->
							<block v-if="item.dateType == 1">
								<view class="setting">
									<view class="date">
										{{item.create_time}}
									</view>
									<view class="count">
										<image src="../../static/icon-like.png" mode=""></image>
										<text class="mr-14">{{item.like}}</text>
										<image src="../../static/icon-hate.png" mode=""></image>
										<text>{{item.no_like}}</text>
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-1">
										拼
									</view>
									<view class="title line-clamp">
										{{item.title}}
									</view>
									<text class="num">{{item.num}}/{{item.seat}}座</text>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 租车 -->
							<block v-if="item.dateType == 4">
								<view class="setting">
									<view class="chuzu-status chuzu-status-1" v-if="item.car_status==1">
										<text>●</text>出租中
									</view>
									<view class="chuzu-status chuzu-status-2" v-if="item.car_status==0">
										<text>●</text>空闲中
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-2">
										租
									</view>
									<view class="title line-clamp">
										{{item.address}}
									</view>
								</view>
								<view class="desc flex-between">
									<view>{{item.brand}}{{item.model}}{{item.color}}</view>
									<view>{{item.number_plate}}</view>
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 包车 -->
							<block v-if="item.dateType == 5">
								<view class="flex-between relative">
									<view class="type-badge type-badge-3">
										包
									</view>
									<view class="title line-clamp">
										{{item.brand}}{{item.model}}{{item.color}}
									</view>
								</view>
								<view class="desc">
									{{item.number_plate}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 店铺 -->
							<block v-if="currentBadge==6">
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.name}}
									</view>
								</view>
								<view class="desc line-clamp-2">
									{{item.introduction}}
								</view>
							</block>
						</view>
					</template>
				</u-waterfall>
				<view class="pb-80">
					<u-loadmore :status="status"></u-loadmore>
				</view>
			</view>
			<!-- 推荐瀑布流 end -->
		</scroll-view>
		<u-popup v-model="ridingShow" mode="center" border-radius="16" :closeable="true">
			<view class="riding-popup">
				<view class="title">
					请输入乘车码
				</view>
				<view class="input">
					<u-input bgColor="#f5f5f5" v-model="ridingCode"></u-input>
				</view>
				<view class="n-btn-primary" @click="confirmCheckIn">
					确认
				</view>
			</view>
		</u-popup>
		<!-- 取消行程说明 -->
		<u-modal v-model="czqxsmShow" @confirm="driverqxxc" @cancel="czqxsmShow = false" :show-cancel-button="true">
			<view class="p-30">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import calendarTab from '@/components/calendar-tab/calendar-tab.vue'
	export default {
		name: "tuijian-xingcheng",
		components: {
			calendarTab,
		},
		data() {
			return {
				ridingCode: '',
				ridingShow: false,
				// 推荐
				badgeList: [{
						name: '猜你喜欢',
						id: 0
					},
					{
						name: '拼车',
						id: 1
					},
					{
						name: '班车',
						id: 3
					},
					{
						name: '租车',
						id: 4
					},
					{
						name: '包车',
						id: 5
					},
					// {
					// 	name: '旅游拼车',
					// 	id: 2
					// },
					{
						name: '店铺',
						id: 6
					},


				], //推荐标签分类
				searchHeight: 0,
				stickyFlag: false,
				currentBadge: 0, //当前分类标签下标
				page: 1,
				list: [],
				status: 'loading', //loadmore loading / nomore
				keyword: '',
				triggered: false,
				curReportId: '',
				czqxsmShow: false,
				content: '',
				itinerary_id: '',
				curDate: ''
			};
		},
		filters: {
			userStatus(e) {
				let status = ''
				switch (e) {
					case '-1':
						status = '待支付'
						break;
					case '0':
						status = '待确认'
						break;
					case '1':
						status = '进行中'
						break;
					case '2':
						status = '已被车主拒绝'
						break;
					case '3':
						status = '待上车确认'
						break;
					case '4':
						status = '待评价'
						break;
					case '5':
						status = '已完成'
						break;
					case '6':
						status = '已取消'
						break;
					case '7':
						status = '已确认，待出发'
						break;
					case '8':
						status = '车主已取消'
						break;
					case '9':
						status = '待取车'
						break;
					case '10':
						status = '已取车'
						break;
					case '11':
						status = '已提交还车，待车主确认'
						break;
					case '12':
						status = '已确认还车'
						break;
					case '13':
						status = '车主驳回还车'
						break;
					case '14':
						status = '申请客服介入'
				}
				return status
			},
			status(e) {
				let status = ''
				switch (e) {
					case '1':
						status = '当前有效行程'
						break;
					case '2':
						status = '待确认'
						break;
					case '3':
						status = '进行中'
						break;
					case '4':
						status = '已完成'
						break;
					case '5':
						status = '已取消'
				}
				return status
			},
			type(e) {
				let type = ''
				switch (e) {
					case '1':
						type = '上下班'
						break;
					case '2':
						type = '旅游'
						break;
					case '3':
						type = '节假日'
				}
				return type
			}
		},
		computed: {
			...mapState({
				locationCity: (state) => state.user.locationCity
			})
		},
		props: {
			swiperHeight: {
				type: [String, Number],
				default: 0
			},
			nowXcList: {
				type: Array,
				default: () => {
					return []
				}
			},
			nowDate: {
				type: [String, Number],
				default: ''
			}
		},
		mounted() {
			this._freshing = false;
			this.guessLike()
			this.getElInfo()
			this.getConfig()
		},
		methods: {
			...mapActions(['refreshUserInfo']),
			// 选择日期
			pickerDate(e) {
				console.log(e)
				console.log('========================')
				console.log('自定义下拉刷新被触发')
				this.curDate = e
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}

				this.list = []
				this.page = 1
				this.status = 'loading'
				if (this.currentBadge == 0) {
					this.guessLike()
				}
				if (this.currentBadge == 1 || this.currentBadge == 2 || this.currentBadge == 3) {
					this.getList()
				}
				if (this.currentBadge == 4) {
					this.homeCarRental()
				}
				if (this.currentBadge == 5) {
					this.homeChartered()
				}
				if (this.currentBadge == 6) {
					this.homeShopList()
				}
			},
			getConfig() {
				this.$api.getConfig({
					name: 'czqxsm'
				}).then(res => {
					if (res.code == 1) {
						this.content = res.data
					}
				})
			},
			clickCity() {
				this.$emit('clickCity')
			},
			async getElInfo() {
				this.$u.getRect('.search-wrap').then(res => {
					this.searchHeight = res.height
				})
				// uni.getSystemInfo({
				// 	success: resu => {
				// 		console.log(resu)
				// 		let query = uni.createSelectorQuery()
				// 		query.select('.swiper').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				// 		query.exec(res => {
				// 			this.swiperHeight = resu.windowHeight - res[0].top - resu
				// 				.statusBarHeight +
				// 				'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
				// 			console.log('页面的剩余高度', this.swiperHeight);
				// 		});
				// 	},
				// 	fail: res => {}
				// });
				// let header = await this.$u.getRect('.swiper')
				// console.log(header)
				// this
			},
			scrolltoupper() {
				console.log('触顶1111')
				this.stickyFlag = false
				this.onRefresh()
			},
			pageScroll(e) {
				// console.log('e.detail.scrollTop',e.detail.scrollTop)
				// console.log('this.searchHeight',e.detail.scrollTop)
				let scrollTop = e.detail.scrollTop
				if (scrollTop > this.searchHeight + 36) {
					this.stickyFlag = true
				} else {
					this.stickyFlag = false
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status === 'nomore') {
					return
				}
				this.page++
				this.status = 'loading'
				if (this.currentBadge == 0) {
					this.guessLike()
				}
				if (this.currentBadge == 1 || this.currentBadge == 2 || this.currentBadge == 3) {
					this.getList()
				}
				if (this.currentBadge == 4) {
					this.homeCarRental()
				}
				if (this.currentBadge == 5) {
					this.homeChartered()
				}
				if (this.currentBadge == 6) {
					this.homeShopList()
				}
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				// if (this._freshing) return;
				// this._freshing = true;
				// setTimeout(() => {
				// 	this.triggered = false;
				// 	this._freshing = false;
				
				this.$emit('refreshOrder')
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				console.log('========================')
				console.log('自定义下拉刷新被触发')

				this.list = []
				this.page = 1
				this.status = 'loading'
				if (this.currentBadge == 0) {
					this.guessLike()
				}
				if (this.currentBadge == 1 || this.currentBadge == 2 || this.currentBadge == 3) {
					this.getList()
				}
				if (this.currentBadge == 4) {
					this.homeCarRental()
				}
				if (this.currentBadge == 5) {
					this.homeChartered()
				}
				if (this.currentBadge == 6) {
					this.homeShopList()
				}
				// }, 500);
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},

			search() {
				this.page = 1
				this.list = []
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				this.status = 'loading'

				if (this.currentBadge == 0) {
					this.guessLike()
				}
				if (this.currentBadge == 1 || this.currentBadge == 2 || this.currentBadge == 3) {
					this.getList()
				}
				if (this.currentBadge == 4) {
					this.homeCarRental()
				}
				if (this.currentBadge == 5) {
					this.homeChartered()
				}
				if (this.currentBadge == 6) {
					this.homeShopList()
				}
			},
			// 选择标签
			selectBadge(e) {
				console.log('this.currentBadge')
				console.log(e)
				this.currentBadge = e
				console.log(this.currentBadge)
				this.page = 1
				this.list = []
				this.status = 'loading'
				// 清楚瀑布流
				this.$refs.uWaterfall.clear();
				if (this.currentBadge == 0) {
					this.guessLike()
				}
				if (this.currentBadge == 1 || this.currentBadge == 2 || this.currentBadge == 3) {
					this.getList()
				}
				if (this.currentBadge == 4) {
					this.homeCarRental()
				}
				if (this.currentBadge == 5) {
					this.homeChartered()
				}
				if (this.currentBadge == 6) {
					this.homeShopList()
				}
			},
			// 猜你喜欢
			guessLike() {
				this.$api.cnxhTj({
					page: this.page,
					keyword: this.keyword,
					date: this.curDate
				}).then(res => {
					if (res.code == 1) {
						let allList = []
						let bc = res.data.bc.data
						let xc = res.data.xc.data
						let zc = res.data.zc.data
						bc.forEach((item, i) => {
							bc[i].dateType = 5
						})
						xc.forEach((item, i) => {
							xc[i].dateType = 1
						})
						zc.forEach((item, i) => {
							zc[i].dateType = 4
						})
						if ((this.page >= res.data.bc.last_page || res.data.bc.total == 0) &&
							(this.page >= res.data.zc.last_page || res.data.zc.total == 0) &&
							(this.page >= res.data.xc.last_page || res.data.xc.total == 0)
						) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						allList.push(...bc, ...zc, ...xc)
						let randomList = this.$tools.randomArray(allList)
						console.log(randomList)
						this.list.push(...randomList)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 获取上下班拼车/旅游拼车/节假日拼车列表
			getList() {
				this.$api.homeItinerary({
					page: this.page,
					type: this.currentBadge,
					keyword: this.keyword,
					date: this.curDate
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 1
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 租车列表
			homeCarRental() {
				this.$api.homeCarRental({
					page: this.page,
					keyword: this.keyword,
					date: this.curDate
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 4
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 包车列表
			homeChartered() {
				this.$api.homeChartered({
					page: this.page,
					keyword: this.keyword,
					date: this.curDate
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 5
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 店铺
			homeShopList() {
				this.$api.homeShopList({
					page: this.page,
					keyword: this.keyword,
					date: this.curDate
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 6
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			goDetail(id, dateType) {
				console.log(id)
				console.log(dateType)

				let is_auth = uni.getStorageSync('userInfo').is_auth
				if (is_auth != 1 && is_auth != 5) {
					uni.showModal({
						title: '温馨提示',
						content: '您还没有实名认证，点击确定完成认证信息',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages_user/realname_authentication5/realname_authentication5'
								})
							}
						}
					})
					return
				}

				if (this.currentBadge == 1 || this.currentBadge == 2 || this.currentBadge == 3 || dateType == 1) {
					uni.navigateTo({
						url: '../journey_detail/journey_detail?id=' + id + '&type=' + this.currentBadge
					})
				}
				if (dateType == 4) {
					uni.navigateTo({
						url: '../carRentalDetail/carRentalDetail?id=' + id
					})
				}
				if (dateType == 5) {
					uni.navigateTo({
						url: '../charteredDetail/charteredDetail?id=' + id
					})
				}
				if (this.currentBadge == 6) {
					uni.navigateTo({
						url: '/pages_user/myShop/userShopDetail?shopId=' + id
					})
				}

			},
			comment(item) {
				uni.setStorageSync('orderInfo', item)
				uni.navigateTo({
					url: '/pages_user/my_appointment/comment_detail'
				})
			},
			ckcancel(item, i) {
				uni.showModal({
					title: '提示',
					content: '确认取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.orderCancel({
								order_id: item.id
							}).then(res => {
								this.$tools.toast(res.msg)
								if (res.code == 1) {
									this.$emit('refreshOrder')
								}
							})
						}
					}
				})
			},
			timeEnd() {
				this.$emit('refreshOrder')
			},
			// 支付
			payment(item, i) {
				// #ifdef APP-PLUS || H5
				// app支付宝支付
				this.$api.payAlipay({
					order_id: item.id
				}).then(orderInfo => {
					this.$tools.appAlipay(orderInfo.data).then(payInfo => {
						if (payInfo.errMsg == 'requestPayment:ok') {
							this.$tools.toast('支付成功')
							this.$emit('refreshOrder')
						} else {
							this.$tools.toast('支付失败')
						}
					})
				})
				// #endif

				// #ifdef MP-WEIXIN
				this.$api.payMinipay({
					order_id: item.id
				}).then(orderInfo => {
					console.log(orderInfo)
					this.$tools.wechatMpPay(orderInfo.data).then(payInfo => {
						if (payInfo.errMsg == 'requestPayment:ok') {
							this.$tools.toast('支付成功')
							this.$emit('refreshOrder')
						} else {
							this.$tools.toast('支付失败')
						}
					})
				})
				// #endif
			},
			confirmOrder(item, i) {
				uni.showModal({
					title: '提示',
					content: '确认完成订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.appointmentComplete({
								order_id: item.id
							}).then(res => {
								this.$tools.toast(res.msg)
								if (res.code == 1) {
									this.$emit('refreshOrder')
								}
							})
						}
					}
				})
			},
			goOrderDetail(id) {
				uni.navigateTo({
					url: '/pages_user/my_appointment/detail?id=' + id
				})
			},

			/* 
			 
				车主订单
			 
			 */

			driverqxxcHandle(itinerary_id) {
				this.czqxsmShow = true
				this.itinerary_id = itinerary_id
			},
			// 取消行程
			driverqxxc() {
				this.$api.driverqxxc({
					xcid: this.itinerary_id
				}).then(res => {
					if (res.code == 1) {
						this.czqxsmShow = false
						this.refreshUserInfo()
						this.payCompensation()
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 支付赔偿金
			payCompensation() {
				this.$api.compensationPayment().then(orderInfo => {
					if (orderInfo.code == 1) {
						this.$tools.wechatMpPay(orderInfo.data).then(payInfo => {
							if (payInfo.errMsg == 'requestPayment:ok') {
								this.$tools.toast('支付成功')

								this.$emit('refreshOrder')
								this.refreshUserInfo()
							} else {
								this.$tools.toast('支付失败')
							}
						})
					} else {
						this.$tools.toast('取消成功')

						this.$emit('refreshOrder')
						this.refreshUserInfo()
					}
				})
			},
			// 行程开始
			driverksxc(itinerary_id, i, item) {
				uni.showModal({
					title: '提示',
					content: '确认开始行程？',
					success: (res) => {
						if (res.confirm) {
							this.$api.driverksxc({
								itinerary_id
							}).then(res => {
								this.$tools.toast(res.msg)
								if (res.code == 1) {
									this.$emit('refreshOrder')
								}
							})
						}
					}
				})

			},
			// 行程结束
			driverjsxc(itinerary_id, i, item) {
				uni.showModal({
					title: '提示',
					content: '确认结束行程？',
					success: (res) => {
						if (res.confirm) {
							this.$api.driverjsxc({
								itinerary_id
							}).then(res => {
								this.$tools.toast(res.msg)
								if (res.code == 1) {
									this.$emit('refreshOrder')
								}
							})
						}
					}
				})
			},
			// 确认同行
			confirmOrder1(order_id, i, _i, item) {
				uni.showModal({
					title: '提示',
					content: '确认这位乘客同行吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.itineraryConfirm({
								order_id
							}).then(res => {
								this.$tools.toast(res.msg)
								if (res.code == 1) {
									this.$emit('refreshOrder')
								}
							})
						}
					}
				})
			},
			// 拒绝同行
			refuse(order_id, i, _i, item) {
				uni.showModal({
					title: '提示',
					content: '确定要拒绝这位乘客吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.itineraryReject({
								order_id
							}).then(res => {
								this.$tools.toast(res.msg)
								if (res.code == 1) {
									this.$emit('refreshOrder')
								}
							})
						}
					}
				})
			},
			openCheckIn(orderId) {
				this.orderId = orderId
				this.ridingShow = true
			},
			confirmCheckIn() {
				this.$api.itineraryCheckIn({
					order_id: this.orderId,
					code: this.ridingCode
				}).then(res => {
					this.$tools.toast(res.msg)
					if (res.code == 1) {
						this.$tools.toast(res.msg)
						if (res.code == 1) {
							this.ridingShow = false
							this.$emit('refreshOrder')
						}
					}
				})
			},
			/* 
			 
			 车主订单结束
			 
			 */

			// 查看详情
			goCzDetail(status, id, money, order) {
				if (order.length === 0) {
					if (status == 1) {
						uni.navigateTo({
							url: '/pages_user/myItinerary/detail_1?itinerary_id=' + id + '&money=' + money
						})
					}
				} else {
					if (status == 1) {
						uni.navigateTo({
							url: '/pages_user/myItinerary/detail_2?itinerary_id=' + id + '&money=' + money
						})
					}
				}
				if (status == 2) {
					uni.navigateTo({
						url: '/pages_user/myItinerary/detail_2?itinerary_id=' + id + '&money=' + money
					})
				}
				if (status == 3) {
					uni.navigateTo({
						url: '/pages_user/myItinerary/detail_3?itinerary_id=' + id
					})
				}
				if (status == 4) {
					uni.navigateTo({
						url: '/pages_user/myItinerary/detail_3?itinerary_id=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.option-wrap {
		background: #308a57;
		padding: 20upx 30upx 30upx;
	}

	.search-wrap {
		background: url(https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20221008/69527e06102d98f0767d9ab5ca8fb3c2.png) no-repeat;
		height: 72upx;
		background-size: 100% 100%;
		@include flex-between;

		image {
			width: 34upx;
			margin: 0 10upx 0 20upx;
		}

		.text {
			font-size: 28upx;
			color: #318B59;
			margin-right: 10upx;
		}

		.btn {
			width: 120upx;
			height: 60upx;
			background: #318A59;
			box-shadow: 0px 3upx 6upx rgba(49, 138, 89, 0.2);
			border-radius: 32upx;
			margin-right: 6upx;
			font-size: 30upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60upx;
		}
	}

	.scroll-view {
		width: 100%;
	}

	.sticky-wrap {
		height: 126px;
	}

	.badge {
		white-space: nowrap;
		padding: 12px 0 20upx;
	
		.item {
			display: inline-block;
			line-height: 22px;
			background: rgba(255, 255, 255, .2);
			border-radius: 22upx;
			padding: 0 14upx;
			min-width: 90upx;
			text-align: center;
			font-size: 24upx;
			color: rgba(255, 255, 255, .5);
			// margin: 24upx 14upx 40upx 0;
			margin-right: 14upx;
		}
	
		.item.cur {
			color: #318A58;
			background: #fff;
		}
	}

	.swiper-item-1 {
		position: relative;

		.sticky {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			padding: 0 30upx;
			z-index: 10000;
			background: #308a57;
		}
	}

	.list-1 {
		// @include flex-between;
		// align-items: flex-start;
		// flex-wrap: wrap;
		padding: 30upx;
		margin-top: -30upx;
		background: #fff;
		border-radius: 30upx 30upx 0 0;

		.item {
			width: 335upx;
			border-radius: 16upx;
			position: relative;
			margin-bottom: 35upx;

			.setting {
				position: absolute;
				left: 0;
				top: 0;
				padding: 10upx;
				@include flex-between;
				width: 100%;

				.date {
					line-height: 40upx;
					background: rgba(255, 142, 28, .8);
					font-size: 28upx;
					color: #FFFFFF;
					padding: 0 12upx;
					border-radius: 4upx;
				}

				.count {
					line-height: 40upx;
					background: rgba(49, 138, 88, 1);
					font-size: 20upx;
					color: #FFFFFF;
					border-radius: 4upx;
					padding: 0 12upx;
					@include flex-between;

					image {
						width: 24upx;
						height: 24upx;
						margin-right: 4upx;
					}
				}
			}

			.pic {
				width: 335upx;
			}

			.title {
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
			}

			.num {
				font-size: 20upx;
				font-weight: 400;
				color: #FF8E1C;
				line-height: 30upx;
				background: #FFFFFF;
				border: 2upx solid #FF8E1C;
				border-radius: 17upx;
				padding: 0 10upx;
				white-space: nowrap;
			}

			.desc {
				font-size: 24upx;
				color: #999999;
				margin: 8upx 0 18upx;
				line-height: 1.6;
				flex-wrap: wrap;
			}

			.price {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;

				text {
					font-size: 24upx;
					font-weight: 400;
					color: #333;
				}
			}

			.avatar {
				width: 42upx;
				height: 42upx;
				border-radius: 50%;
			}

			.name {
				font-size: 24upx;
				color: #333333;
				margin-left: 10upx;
				width: 72upx;
			}
		}
	}

	.desc {
		font-size: 24upx;
		color: #999999;
		margin: 8upx 0 18upx;
		line-height: 1.6;
		flex-wrap: wrap;
	}

	.chuzu-status {
		width: 125upx;
		line-height: 48upx;
		text-align: center;
		border-radius: 16upx 0px 16upx 0px;
		font-size: 26upx;
		color: #FFFFFF;

		text {
			font-size: 20upx;
			font-weight: 400;
		}

		&-1 {
			background: #FF8E1C;
		}

		&-2 {
			background: #519D76;
		}
	}

	.list-3 {
		.status-text {
			font-size: 24upx;
			font-weight: 400;
			color: #333333;
			@include flex;

			.line {
				width: 40upx;
				height: 2upx;
				background: #333333;
				opacity: 0.4;
				margin: 0 20upx;
			}

			text {
				font-size: 48upx;
			}
		}

		.item-3 {
			background: #fff;
			border-radius: 8upx;
			margin-bottom: 24upx;

			.header-3 {
				@include flex-between;

				.date {
					font-size: 24upx;
					color: #999999;

					text {
						color: #000000;
					}
				}

				.badge {
					font-size: 28upx;
					font-weight: 500;
					color: #FF8E1C;
					padding: 15upx 20upx;
					line-height: 1;
					border-radius: 29upx 0px 0px 29upx;
					background: #FFF3E7;
					margin-right: -20upx;
				}
			}

			.body-3 {
				@include flex-between;

				.pic {
					width: 180upx;
					height: 180upx;
					border-radius: 8upx;
				}

				.address {
					flex: 1;
				}

				.price {
					font-size: 36upx;
					font-weight: bold;
					color: #328B5A;
					margin-left: 67upx;
				}

				.seat {
					font-size: 24upx;
					font-weight: 500;
					color: #519D76;
					padding: 0 10upx;
					line-height: 42upx;
					text-align: center;
					border: 1upx solid #519D76;
					border-radius: 4upx;

					text {
						color: #FF8E1C;
					}
				}
			}

			.footer {
				@include flex-between;

				.status {
					color: $color-primary;
					font-size: 24upx;
					line-height: 68upx;
				}

				.text {
					padding-top: 20upx;
					line-height: 1;
					font-size: 28upx;
					color: #333333;

					text {
						color: #519D76;
					}
				}

				.user {
					@include flex-end;
					margin: 20upx 0;

					.name {
						flex: 1;
						font-size: 32upx;
						font-weight: 500;
						color: #333333;
						margin-left: 30upx;
					}

					.btn-1 {
						width: 200upx;
						line-height: 68upx;
						border: 1upx solid #519D76;
						border-radius: 34upx;
						text-align: center;
						font-size: 28upx;
						color: #519D76;
					}

					.btn-2 {
						width: 200upx;
						line-height: 68upx;
						border-radius: 34upx;
						text-align: center;
						font-size: 28upx;
						color: #fff;
						background: #519D76;
						margin-left: 20upx;
					}
				}
			}
		}

		.item-4 {
			background: #fff;
			border-radius: 8upx;
			margin-bottom: 24upx;

			.action {
				@include flex-end;
				padding-bottom: 30upx;

				.start-btn {
					width: 160upx;
					line-height: 58upx;
					border-radius: 34upx;
					text-align: center;
					font-size: 28upx;
					color: #fff;
					background: #519D76;
					margin-left: 20upx;
				}

				.cancel-btn {
					width: 160upx;
					line-height: 58upx;
					border-radius: 34upx;
					text-align: center;
					font-size: 28upx;
					color: $color-error;
					background: #fff;
					border: 2upx solid $color-error;
					margin-left: 20upx;
				}
			}

			.header-4 {
				@include flex-between;

				.date {
					font-size: 24upx;
					color: #999999;

					text {
						color: #000000;
					}
				}

				.badge {
					font-size: 28upx;
					font-weight: 500;
					color: #FF8E1C;
					padding: 15upx 20upx;
					line-height: 1;
					border-radius: 29upx 0px 0px 29upx;
					background: #FFF3E7;
					margin-right: -20upx;
				}
			}

			.body-4 {
				@include flex-between;
				padding-bottom: 20upx;

				.pic {
					width: 180upx;
					height: 180upx;
					border-radius: 8upx;
				}

				.address {
					flex: 1;
				}

				.price {
					font-size: 36upx;
					font-weight: bold;
					color: #328B5A;
					margin-left: 67upx;
				}

				.seat {
					font-size: 24upx;
					font-weight: 500;
					color: #519D76;
					padding: 0 10upx;
					line-height: 42upx;
					text-align: center;
					border: 1upx solid #519D76;
					border-radius: 4upx;

					text {
						color: #FF8E1C;
					}
				}
			}

			.footer-4 {
				border-top: 1upx solid #efefef;

				.text {
					padding-top: 20upx;
					line-height: 1;
					font-size: 28upx;
					color: #333333;
					margin-bottom: 30upx;

					.start {
						color: #519D76;
						position: relative;
						padding-left: 26upx;

						:after {
							content: '';
							position: absolute;
							left: -0upx;
							top: 14upx;
							width: 16upx;
							height: 16upx;
							border-radius: 100%;
							display: block;
							background: #519D76;
						}
					}

					.end {
						color: #AAAAAA;
						position: relative;
						padding-left: 26upx;

						:after {
							content: '';
							position: absolute;
							left: -0upx;
							top: 14upx;
							width: 16upx;
							height: 16upx;
							border-radius: 100%;
							display: block;
							background: #AAAAAA;
						}
					}
				}

				.user {
					@include flex-between;
					margin: 30upx 0 35upx;

					.name {
						flex: 1;
						font-size: 32upx;
						font-weight: 500;
						color: #333333;
						margin-left: 30upx;
					}

					.btn-1 {
						width: 160upx;
						line-height: 58upx;
						border: 1upx solid #519D76;
						border-radius: 34upx;
						text-align: center;
						font-size: 28upx;
						color: #519D76;
					}

					.btn-2 {
						width: 160upx;
						line-height: 58upx;
						border-radius: 34upx;
						text-align: center;
						font-size: 28upx;
						color: #fff;
						background: #519D76;
						margin-left: 20upx;
					}
				}
			}
		}

		.address {
			// padding: 10upx 0;

			.item {
				@include flex-between;

				.start {
					font-size: 20upx;
					color: #519D76;
					background: #FFFFFF;
					border: 1upx solid #519D76;
					border-radius: 4upx;
					padding: 4upx 6upx;
				}

				.end {
					font-size: 20upx;
					color: #FF8E1C;
					background: #FFFFFF;
					border: 1upx solid #FF8E1C;
					border-radius: 4upx;
					padding: 4upx 6upx;
				}

				.start-point {
					width: 17upx;
					height: 17upx;
					background: #519D76;
					border-radius: 50%;
					margin: 0 20upx 0 10upx;
					position: relative;

					.line {
						position: absolute;
						left: 8upx;
						top: 17upx;
						height: 48upx;
						border: 1upx dashed #999999;
					}
				}

				.end-point {
					width: 17upx;
					height: 17upx;
					background: #FF8E1C;
					border-radius: 50%;
					margin: 0 20upx 0 10upx;
					position: relative;
				}

				.name {
					flex: 1;
					font-size: 24upx;
					color: #000000;
				}
			}
		}
	}

	.riding-popup {
		width: 580upx;
		height: 525upx;
		background: linear-gradient(180deg, #EEFFF6 0%, #FFFFFF 100%);
		text-align: center;

		.title {
			padding-top: 160upx;
			font-size: 28upx;
			color: #333333;
			text-align: center;
		}

		.input {
			width: 420upx;
			height: 78upx;
			background: #F5F5F5;
			border-radius: 39upx;
			margin: 34upx auto 48upx;
			padding: 0 30upx;
		}
	}

	.relative {
		position: relative;
	}

	.type-badge {
		padding: 10upx;
		line-height: 1;
		border-radius: 6upx;
		color: #fff;
		position: absolute;
		top: -60upx;
		right: 10upx;
		z-index: 60;
		font-size: 26upx;
	}

	.type-badge-1 {
		background: rgba(50, 139, 90, .7);
	}

	.type-badge-2 {
		background: rgba(80, 133, 249, .7);
	}

	.type-badge-3 {
		background: rgba(256, 142, 28, .7);
	}

	.pic-center {
		max-height: 440rpx;
		overflow: hidden;
	}
</style>
